<!DOCTYPE HTML>
<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | Topher's Breakfast Cereal Character Guide</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
    
    <link href="cereal-characters.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/exhibit-api.js -->
    <script src="../api/exhibit-api.js"></script>

    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/extensions/time/time-extension.js -->
    <link rel="exhibit-extension" type="text/javascript" href="../api/extensions/time/time-extension.js" />
    
    <script src="copyright.js" type="text/javascript"></script>
    <link rel='stylesheet' href='styles.css' type='text/css' />
  </head>
  <body>
    <ul id="path">
      <li><a href="/">SIMILE Widgets</a></li>
      <li><a href="/exhibit/">Exhibit</a></li>
      <li><span>Examples: Topher's Breakfast Cereal Character Guide</span></li>
    </ul>
    <table id="header">
        <tr style="vertical-align:middle">
            <td><img alt="Breakfast cereal banner" src="banner.png" style="float: left; margin-right: 2em;"/></td>
            <td>
                <p>Please refer to 
                    <a href="http://www.lavasurfer.com/cereal-guide.html" target="_blank">Topher's original site</a>
                    for copyright information. We are grateful to Topher for letting us host this data on our site.
                </p>
                <p>Here is the <a href="cereal-characters.js" target="_blank">Exhibit JSON data file</a>.
                </p>
            </td>
        </tr>
    </table>
    <div id="body">
        <div style="width: 100%">
            <table
            style="width:100%;border-spacing:10;border:0"
                   id="exhibit">
                <tr>
                    <td style="width:15%">
                        <b>Search</b>
                        <div data-ex-role="facet" data-ex-facet-class="TextSearch"></div>
                        <hr/>
                        <div data-ex-role="facet" data-ex-expression=".brand" data-ex-facet-label="Brands" data-ex-height="15em"></div>
                        <div data-ex-role="facet" data-ex-expression=".decade" data-ex-facet-label="Decades" data-ex-height="20em"></div>
                    </td>
                    <td>
  
                        <div data-ex-role="coder" data-ex-coder-class="Icon" id="icons">
                            <span data-ex-icon="http://www.wybron.com/sml/general_mills.png">General Mills</span>
                            <span data-ex-icon="http://www.wybron.com/sml/kellogs.png">Kellog's</span>
                            <span data-ex-icon="http://www.wybron.com/sml/nabisco.png">Nabisco</span>
                            <span data-ex-icon="http://www.wybron.com/sml/nestle.png">Nestle</span>
                            <span data-ex-icon="http://www.wybron.com/sml/post.png">Post</span>
                            <span data-ex-icon="http://www.wybron.com/sml/quaker.png">Quaker Oats</span>
                            <span data-ex-icon="http://www.wybron.com/sml/ralston.png">Ralston</span>
                        </div>
                  
                        <div data-ex-role="viewPanel">
                            <div data-ex-role="lens" class="item" style="display: none;">
                                <table style="border-spacing:5">
                                    <tr>
                                        <td style="position: relative"><div class="itemThumbnail-blocker"></div><img data-ex-src-content=".image" /></td>
                                        <td>
                                            <h1><span data-ex-content=".label" ></span></h1>
                                            <h2><span data-ex-content=".brand"></span> <span data-ex-content=".cereal"></span></h2>
                                            <p data-ex-content=".text"></p>
                                            <div style="text-align:center"><a data-ex-href-content=".url" target="new">More...</a></div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div data-ex-role="view" 
                                data-ex-view-class="Thumbnail"
                                data-ex-show-all="true"
                                data-ex-paginate="true"
                                data-ex-possible-orders=".brand, .decade, .form, .country">
                          
                                <table data-ex-role="lens" class="itemThumbnail" style="display: none;">
                                    <tr>
                                        <td style="vertial-align:bottom" class="itemThumbnail-thumbnailContainer">
                                            <div style="position: relative"><div class="itemThumbnail-blocker"></div><img data-ex-src-content=".thumbnail" /></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="itemThumbnail-caption"><span data-ex-content="value"></span></td>
                                    </tr>
                                </table>
                            </div>
                            <div data-ex-role="view" 
                                data-ex-view-class="Timeline"
                                data-ex-start=".decade"
                                data-ex-color-key=".brand"
                                 data-ex-iconkey=".brand"
                                 data-ex-icon-coder="icons"
                                data-ex-top-band-unit="year"
                                data-ex-top-band-pixels-per-unit="50"
                                data-ex-bottom-band-unit="decade"
                                data-ex-bottom-band-pixels-per-unit="50"
                                data-ex-bubble-width="400"
                                data-ex-bubble-height="250">
                            </div>
                        </div>
                    </td>
                    <td style="width:15%">
                        <div data-ex-role="facet" data-ex-expression=".country" data-ex-facet-label="Countries" data-ex-height="15em"></div>
                        <div data-ex-role="facet" data-ex-expression=".form" data-ex-facet-label="Forms" data-ex-height="20em"></div>
                        <div style="text-align:center" data-ex-role="logo"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
  </body>
</html>
